<template>
    <div>
        <Card style="margin-bottom:22px; width:75vw">
            <header slot="title" class="header">
                <h4>空间信息</h4>
                <Button v-if="role < 3 " class="changeBtn" @click="workStationEdit" type="primary" ghost> 修改</Button>
            </header>

            <main>
                <Row>
                    <!-- left -->
                    <Col span="14">
                    <section class="workstation_info">
                        <span>分部：</span>
                        <span>{{workStation.branch_zw}}</span>
                    </section>

                    <section class="workstation_info">
                        <span>编号：</span>
                        <span>{{workStation.number}}</span>
                    </section>

                    <section class="workstation_info">
                        <span>区域：</span>
                        <span>{{workStation.region_zw}}</span>
                    </section>

                    <section class="workstation_info">
                        <span>面积：</span>
                        <span>{{workStation.measure}}</span>
                    </section>

                    <section class="workstation_info">
                        <span>办公类型：</span>
                        <span>{{workStation.work_type_zw}}</span>
                    </section>

                    <section class="workstation_info">
                        <span>价格：</span>
                        <span>{{workStation.price}}</span>
                    </section>
                    </Col>

                    <!-- right -->
                    <Col span="10">
                    <section class="workstation_info">
                        <span>楼层：</span>
                        <span>{{workStation.floor_zw}}</span>
                    </section>

                    <section class="workstation_info">
                        <span>建议使用人数：</span>
                        <span>{{workStation.suggest_person_num}}</span>
                    </section>

                    <section class="workstation_info">
                        <span>有无室内空调：</span>
                        <span>{{workStation.is_indoor_air_zw}}</span>
                    </section>

                    <section class="workstation_info">
                        <span>窗户朝向：</span>
                        <span>{{workStation.window_direction}}</span>
                    </section>

                    <section v-if="workStation.ws_pic.length" class="workstation_info_pic" @click="pic_preview(workStation.ws_pic)">
                        <div class="pic_swiper" v-if="workStation.ws_pic.length <= 1">
                            <img :src="workStation.ws_pic">
                        </div>
                        <div v-else class="pic_swiper">
                            <swiper :options="swiperOption">
                                <swiper-slide v-for="(item, index) in workStation.ws_pic" :key="index">
                                    <img :src="item" />
                                </swiper-slide>
                            </swiper>
                        </div>
                    </section>

                    <section v-else class="workstation_info_pic">
                        <div>
                            <img :src="noPic">
                        </div>
                    </section>

                    </Col>
                </Row>
            </main>

        </Card>

        <Card style="margin-bottom:22px;width:75vw">
            <header slot="title" class="header">
                <h4>公司信息</h4>
                <Button v-if="role < 3 " class="changeBtn" @click="officeInfoEdit" type="primary" ghost> 修改</Button>
            </header>
            <main class="main">

                <section v-if="workStation.company_pic.length" class="company_info_pic" @click="pic_preview(workStation.company_pic)">
                    <div class="pic_swiper" v-if="workStation.company_pic.length <= 1">
                        <img :src="workStation.company_pic">
                    </div>
                    <div v-else class="pic_swiper">
                        <swiper :options="swiperOption">
                            <swiper-slide v-for="(item, index) in workStation.company_pic" :key="index">
                                <img :src="item" />
                            </swiper-slide>
                        </swiper>
                    </div>
                </section>

                <section v-else class="company_info_pic">
                    <div>
                        <img :src="noPic">
                    </div>
                </section>

                <Row>
                    <!-- left -->
                    <Col span="14">
                    <section class="company_info">
                        <span>公司名称：</span>
                        <span>{{workStation.company_name}}</span>
                    </section>

                    <section class="company_info">
                        <span>到期时间：</span>
                        <span>{{workStation.company_out_time}}</span>
                    </section>

                    <section class="company_info">
                        <span>入驻时间：</span>
                        <span>{{workStation.company_in_time}}</span>
                    </section>
                    </Col>

                    <!-- right -->
                    <Col span="10">
                    <section class="company_info">
                        <span>负责人：</span>
                        <span>{{workStation.company_person}} &nbsp;&nbsp;&nbsp;&nbsp; {{workStation.company_tel}} </span>
                    </section>

                    <section class="company_info_staff">
                        <span>办公人员( {{workStation.company_work_preson.length}} )：</span>
                        <b v-for="(item, index) in workStation.company_work_preson" :key="index.tel"> {{ item.username }} </b>
                    </section>
                    </Col>
                </Row>

                <section class="company_info">
                    <span>公司简介：</span>
                    <span>{{workStation.company_introduce}}</span>
                </section>

                <section class="company_info">
                    <span>主营业务：</span>
                    <span>{{workStation.company_business}}</span>
                </section>

                <section class="company_info">
                    <span>对游客开放企业信息：</span>
                    <span>{{workStation.is_show_company == 1 ? '是' : '否'}}</span>
                </section>

            </main>
        </Card>

        <Card style="width:75vw">
            <header slot="title" class="header">
                <h4>历次备注</h4>
            </header>
            <Table ref="table" :loading="loading" stripe :columns="columns1" :data="data1"></Table>
            <Page :total="total" :current="currentPage" show-sizer show-total :page-size="pageSize" @on-page-size-change="getListByPageSize" @on-change="getListByPageNum"> </Page>
        </Card>

        <Button type="primary" @click="close" class="runtenBtn"> 返回 </Button>


        <mySwper :isShow="isShow" :caseList="caseList" @handleMask="isShow = false"></mySwper>

    </div>
</template>
<script>
    import {
        swiper,
        swiperSlide
    } from 'vue-awesome-swiper'
    import mySwper from '_c/swper/swper'
    import {
        mapMutations,
        mapGetters
    } from 'vuex'
    import axios from '@/libs/api.request'
    export default {
        components: {
            swiper,
            swiperSlide,
            mySwper
        },
        data() {
            return {
                isShow: false,

                // 图片列表
                caseList: [],

                noPic: require('@/assets/images/nopic.jpg'),

                // 工位id
                wsid: '',

                workStation: {
                    company_pic: '',
                    ws_pic: '',
                    company_work_preson: [{
                        username: '',
                        tel: ''
                    }]
                },

                // 轮播图配置
                swiperOption: {
                    // initialSlide: 0,
                    loop: true,
                    speed: 800,
                    width: 150,
                    direction: "horizontal",
                    autoplay: {
                        delay: 5000,
                        stopOnLastSlide: false,
                        disableOnInteraction: false
                    },
                },

                loading: false,
                // 数据总条数
                total: 0,

                // 当前页码
                currentPage: 1,

                // 每页条数
                pageSize: 10,

                columns1: [{
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '填写人',
                        align: 'center',
                        key: 'username'
                    },
                    {
                        title: '填写时间',
                        align: 'center',
                        key: 'c_time'
                    },
                    {
                        title: '填写内容',
                        width: 500,
                        align: 'left',
                        key: 'remark'
                    }
                ],
                data1: []
            }
        },
        methods: {
            ...mapMutations(['closeTag', 'addTag', 'myClose']),
            ...mapGetters(['getRole']),

            // 图片预览
            pic_preview(item) {
                this.caseList = item
                this.isShow = true
            },

            // 根据id获取工位
            getWorkSrationById() {
                axios.ajax_post('admin-work_station-ajax_get_ws_detail', {
                    wsid: this.wsid
                }).then(res => {
                    if (res.data.code === 1) {
                        this.workStation = res.data.data.ws_detail
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            },

            // 获取备注
            getRemark() {
                let data = {
                    wsid: this.wsid,
                    page: this.currentPage,
                    rows: this.pageSize
                }
                axios.ajax_post('admin-work_station-ajax_get_remark', data).then(res => {
                    if (res.data.code === 1) {
                        this.data1 = res.data.data.list
                        this.total = res.data.data.total_num
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            },

            // 关闭页面
            close() {
                this.closeTag({
                    name: "workstation-details",
                    params: {
                        wsid: this.wsid
                    }
                })
                this.changePage('workstation-team', '工位/办公室管理')
            },

            // 页面跳转
            changePage(name, title, params = {}) {
                const route = {
                    name: name,
                    params: params,
                    meta: {
                        title: title
                    }
                }
                this.addTag({
                    route: route,
                    type: 'push'
                })
                this.$router.push(route)
            },

            // 工位信息修改
            workStationEdit() {
                this.myClose('workstation-edit')
                this.changePage('workstation-edit', '修改工位/办公室', this.workStation)
            },

            // 公司信息修改
            officeInfoEdit() {
                this.myClose('officeInfo-edit')
                this.changePage('officeInfo-edit', '修改办公信息', this.workStation)
            },

            getListByPageSize(pageSize) {
                this.pageSize = pageSize
                this.getRemarkList()
            },

            getListByPageNum(page) {
                this.currentPage = page
                this.getRemarkList()
            },

        },
        computed: {
            role() {
                return this.getRole()
            }
        },
        created() {
            this.wsid = this.$route.params.wsid
            this.getWorkSrationById()
            this.getRemark()
        }
    }
</script>
<style lang="less">
    .header {
        display: flex;
        justify-content: space-between;

        h4 {
            font-size: 18px;
            line-height: 30px;
            color: #000;
            padding-left: 20px;

            &::before {
                content: '';
                height: 20px;
                position: absolute;
                left: 20px;
                top: 18px;
                border-left: 6px solid #2A7EFB;
            }
        }
    }

    main.main {
        padding: 40px;
    }

    .workstation_info,
    .company_info {
        margin-bottom: 30px;

        span {
            color: #999;
            font-size: 16px;

            &:last-of-type {
                color: #000;
                // font-weight: 700;
            }
        }
    }

    .company_info_staff {
        span {
            color: #999;
            font-size: 16px;
        }

        b {
            font-size: 16px;
            color: #000;
            font-weight: normal;
            margin-right: 10px;
        }

    }

    .workstation_info_pic,
    .company_info_pic {
        width: 150px;
        height: 100px;

        .pic_swiper {
            width: 100%;
            height: 100%;
            overflow: hidden;

            >div {
                width: 100%;
                height: 100%;
            }

            .swiper-wrapper {
                >div {
                    width: 100%;
                    height: 100%;
                }

                display: -webkit-box;
                width: 100%;
                height: 100%;
            }
        }

        img {
            object-fit: contain;
            display: block;
            width: 100%;
            height: 100%;
        }
    }

    .company_info_pic {
        margin-bottom: 40px;
    }

    .changeBtn {
        width: 80px;
    }

    .runtenBtn {
        width: 200px;
        display: block;
        margin: 50px auto;
    }
</style>